<template>
	<view class="detail-container">
		<!-- 服务状态 -->
		<view class="status-header" :class="'bg-status-' + serviceInfo.status">
			<view class="status-text">{{getStatusText(serviceInfo.status)}}</view>
			<view class="status-desc">{{getStatusDesc(serviceInfo.status)}}</view>
		</view>
		
		<!-- 服务详情 -->
		<view class="detail-card">
			<view class="card-title">服务详情</view>
			
			<view class="info-item">
				<text class="info-label">服务类型</text>
				<text class="info-value">{{getTypeText(serviceInfo.type)}}</text>
			</view>
			
			<view class="info-item">
				<text class="info-label">服务标题</text>
				<text class="info-value">{{serviceInfo.title}}</text>
			</view>
			
			<view class="info-item">
				<text class="info-label">提交时间</text>
				<text class="info-value">{{formatDate(serviceInfo.createTime)}}</text>
			</view>
			
			<view class="info-item column">
				<text class="info-label">详细描述</text>
				<text class="info-content">{{serviceInfo.content}}</text>
			</view>
			
			<view class="info-item" v-if="serviceInfo.address">
				<text class="info-label">地点</text>
				<text class="info-value">{{serviceInfo.address}}</text>
			</view>
			
			<view class="info-item" v-if="serviceInfo.contactPhone">
				<text class="info-label">联系电话</text>
				<text class="info-value">{{serviceInfo.contactPhone}}</text>
			</view>
			
			<!-- 管理员回复 -->
			<view class="info-item column" v-if="serviceInfo.reply">
				<text class="info-label">管理员回复</text>
				<text class="info-content">{{serviceInfo.reply}}</text>
				<text class="reply-time" v-if="serviceInfo.replyTime">回复时间：{{formatDate(serviceInfo.replyTime)}}</text>
			</view>
			
			<!-- 图片 -->
			<view class="image-list" v-if="serviceInfo.images && serviceInfo.images.length > 0">
				<text class="info-label">相关图片</text>
				<view class="image-grid">
					<image 
						class="service-image" 
						v-for="(item, index) in serviceInfo.images" 
						:key="index" 
						:src="getImageUrl(item)" 
						mode="aspectFill"
						@click="previewImage(index)"
					></image>
				</view>
			</view>
		</view>
		
		<!-- 处理记录 -->
		<view class="detail-card" v-if="serviceInfo.records && serviceInfo.records.length > 0">
			<view class="card-title">处理记录</view>
			
			<view class="record-timeline">
				<view class="record-item" v-for="(item, index) in serviceInfo.records" :key="index">
					<view class="record-dot"></view>
					<view class="record-line" v-if="index < serviceInfo.records.length - 1"></view>
					<view class="record-info">
						<view class="record-header">
							<text class="record-title">{{item.title}}</text>
							<text class="record-time">{{formatDate(item.createTime)}}</text>
						</view>
						<text class="record-content">{{item.content}}</text>
						
						<!-- 回复图片 -->
						<view class="image-grid" v-if="item.images && item.images.length > 0">
							<image 
								class="record-image" 
								v-for="(img, imgIdx) in item.images" 
								:key="imgIdx" 
								:src="getImageUrl(img)" 
								mode="aspectFill"
								@click="previewRecordImage(index, imgIdx)"
							></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-box" v-if="!serviceInfo.id">
			<image class="empty-image" src="/static/empty.png"></image>
			<text class="empty-text">服务记录不存在或已删除</text>
		</view>
		
		<!-- 底部按钮 -->
		<view class="action-bar" v-if="serviceInfo.id && (serviceInfo.status === 0 || serviceInfo.status === 1)">
			<button class="action-btn cancel" v-if="serviceInfo.status === 0" @click="cancelService">取消申请</button>
			<button class="action-btn revoke" v-if="serviceInfo.status === 1" @click="revokeService">撤销申请</button>
			<button class="action-btn confirm" v-if="serviceInfo.status === 2" @click="confirmService">确认完成</button>
		</view>
	</view>
</template>

<script>
import { getServiceDetail, cancelService, confirmService, revokeService } from '@/api/service.js';
import { getImageUrl} from '@/utils/image.js';

export default {
	data() {
		return {
			id: null,
			serviceInfo: {
				id: '',
				title: '',
				content: '',
				type: '',
				status: 0,
				createTime: '',
				address: '',
				contactPhone: '',
				images: [],
				records: []
			}
		}
	},
	onLoad(options) {
		if (options.id) {
			this.id = options.id;
			this.loadServiceDetail();
		} else {
			uni.showToast({
				title: '参数错误',
				icon: 'none'
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		}
	},
	methods: {
		getImageUrl,
		// 加载服务详情
		async loadServiceDetail() {
			uni.showLoading({
				title: '加载中'
			});
			
			try {
				const res = await getServiceDetail(this.id);
				console.log("dqweqweqweqweqweqw",res);
				
				if (res.data) {
					this.serviceInfo = res.data;
					console.log(this.serviceInfo);
					
					// 处理图片字符串转为数组
					if (this.serviceInfo.images && typeof this.serviceInfo.images === 'string') {
						this.serviceInfo.images = this.serviceInfo.images.split(',').filter(item => item);
					} else if (!this.serviceInfo.images) {
						this.serviceInfo.images = [];
					}
					
					// 处理记录中的图片
					if (this.serviceInfo.records && this.serviceInfo.records.length > 0) {
						this.serviceInfo.records.forEach(record => {
							if (record.images && typeof record.images === 'string') {
								record.images = record.images.split(',').filter(item => item);
							} else if (!record.images) {
								record.images = [];
							}
						});
					}
				} else {
					uni.showToast({
						title: '记录不存在',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('加载服务详情失败', error);
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				});
			} finally {
				uni.hideLoading();
			}
		},
		
		// 格式化日期
		formatDate(dateStr) {
			if (!dateStr) return '';
			
			const date = new Date(dateStr);
			return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
		},
		
		// 获取类型文本
		getTypeText(type) {
			const typeMap = {
				'0': '物业报修',
				'1': '投诉建议',
				'2': '生活求助'
			};
			return typeMap[type] || '其他服务';
		},
		
		// 获取状态文本
		getStatusText(status) {
			const statusMap = {
				0: '待处理',
				1: '处理中',
				2: '已完成',
				3: '已关闭'
			};
			return statusMap[status] || '未知';
		},
		
		// 获取状态描述
		getStatusDesc(status) {
			const statusMap = {
				0: '您的服务申请已提交，等待工作人员处理',
				1: '工作人员正在处理您的申请',
				2: '您的申请已处理完成',
				3: '该申请已关闭'
			};
			return statusMap[status] || '';
		},
		
		// 预览图片
		previewImage(index) {
			uni.previewImage({
				current: index,
				urls: this.serviceInfo.images.map(item => getImageUrl(item))
			});
		},
		
		// 预览回复图片
		previewRecordImage(recordIndex, imageIndex) {
			uni.previewImage({
				current: imageIndex,
				urls: this.serviceInfo.records[recordIndex].images.map(item => getImageUrl(item))
			});
		},
		
		// 取消服务申请
		cancelService() {
			uni.showModal({
				title: '提示',
				content: '确定要取消该服务申请吗？',
				success: async (res) => {
					if (res.confirm) {
						try {
							uni.showLoading({
								title: '取消中'
							});
							
							// 调用取消接口
							await cancelService(this.id);
							
							uni.hideLoading();
							
							uni.showToast({
								title: '取消成功',
								icon: 'success'
							});
							
							// 重新加载数据
							setTimeout(() => {
								this.loadServiceDetail();
							}, 1500);
						} catch (error) {
							uni.hideLoading();
							uni.showToast({
								title: '操作失败',
								icon: 'none'
							});
						}
					}
				}
			});
		},
		
		// 确认完成
		confirmService() {
			uni.showModal({
				title: '提示',
				content: '确认该服务已完成处理？',
				success: async (res) => {
					if (res.confirm) {
						try {
							uni.showLoading({
								title: '确认中'
							});
							
							// 调用确认接口
							await confirmService(this.id);
							
							uni.hideLoading();
							
							uni.showToast({
								title: '确认成功',
								icon: 'success'
							});
							
							// 重新加载数据
							setTimeout(() => {
								this.loadServiceDetail();
							}, 1500);
						} catch (error) {
							uni.hideLoading();
							uni.showToast({
								title: '操作失败',
								icon: 'none'
							});
						}
					}
				}
			});
		},
		
		// 撤销服务申请
		revokeService() {
			uni.showModal({
				title: '提示',
				content: '确定要撤销该服务申请吗？撤销后需要重新提交申请。',
				success: async (res) => {
					if (res.confirm) {
						try {
							uni.showLoading({
								title: '撤销中'
							});
							
							// 调用撤销接口
							await revokeService(this.id);
							
							uni.hideLoading();
							
							uni.showToast({
								title: '撤销成功',
								icon: 'success'
							});
							
							// 重新加载数据
							setTimeout(() => {
								this.loadServiceDetail();
							}, 1500);
						} catch (error) {
							uni.hideLoading();
							uni.showToast({
								title: '操作失败',
								icon: 'none'
							});
						}
					}
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.detail-container {
	min-height: 100vh;
	background-color: #f8f8f8;
	padding-bottom: 120rpx;
}

.status-header {
	padding: 60rpx 40rpx;
	color: #fff;
}

.bg-status-0 {
	background-color: #FF9500;
}

.bg-status-1 {
	background-color: #007AFF;
}

.bg-status-2 {
	background-color: #4CD964;
}

.bg-status-3 {
	background-color: #909399;
}

.status-text {
	font-size: 40rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.status-desc {
	font-size: 26rpx;
	opacity: 0.9;
}

.detail-card {
	margin: 30rpx;
	background-color: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.card-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 30rpx;
	position: relative;
	padding-left: 20rpx;
}

.card-title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 6rpx;
	width: 6rpx;
	height: 30rpx;
	background-color: #007AFF;
	border-radius: 3rpx;
}

.info-item {
	display: flex;
	margin-bottom: 26rpx;
}

.info-item.column {
	flex-direction: column;
}

.info-label {
	color: #666;
	font-size: 28rpx;
	min-width: 140rpx;
	margin-right: 20rpx;
}

.info-value {
	flex: 1;
	color: #333;
	font-size: 28rpx;
}

.info-content {
	margin-top: 16rpx;
	padding: 20rpx;
	background-color: #f8f8f8;
	border-radius: 8rpx;
	color: #333;
	font-size: 28rpx;
	line-height: 1.6;
}

.reply-time {
	margin-top: 10rpx;
	font-size: 24rpx;
	color: #999;
	text-align: right;
}

.image-list {
	margin-top: 20rpx;
}

.image-grid {
	display: flex;
	flex-wrap: wrap;
	margin-top: 16rpx;
}

.service-image {
	width: 200rpx;
	height: 200rpx;
	margin-right: 16rpx;
	margin-bottom: 16rpx;
	border-radius: 8rpx;
}

.record-image {
	width: 160rpx;
	height: 160rpx;
	margin-right: 16rpx;
	margin-bottom: 16rpx;
	border-radius: 8rpx;
}

.record-timeline {
	position: relative;
	padding-left: 30rpx;
}

.record-item {
	position: relative;
	padding-bottom: 40rpx;
}

.record-dot {
	position: absolute;
	left: -30rpx;
	top: 10rpx;
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	background-color: #007AFF;
	z-index: 2;
}

.record-line {
	position: absolute;
	left: -23rpx;
	top: 26rpx;
	width: 2rpx;
	height: calc(100% - 16rpx);
	background-color: #e0e0e0;
	z-index: 1;
}

.record-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10rpx;
}

.record-title {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
}

.record-time {
	font-size: 24rpx;
	color: #999;
}

.record-content {
	font-size: 26rpx;
	color: #666;
	line-height: 1.6;
}

.empty-box {
	padding-top: 200rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.empty-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 20rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}

.action-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	padding: 20rpx 30rpx;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	display: flex;
	justify-content: space-between;
}

.action-btn {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	font-size: 28rpx;
	margin: 0 10rpx;
}

.cancel {
	background-color: #f5f5f5;
	color: #666;
}

.confirm {
	background-color: #007AFF;
	color: #fff;
}

.action-btn.revoke {
	background-color: #FF9500;
	color: #fff;
}
</style> 